<template>
  <div>
      <el-tag v-for="dev in DevList" :key="dev" closable @close="deleteDevTag(dev)">
          {{ dev }}
      </el-tag>
      <el-row>
              <el-select v-model="newDev" placeholder="选择要添加的新设备">
            <el-option
                v-for="dev in restList"
                :key="dev.name"
                :label="dev.name"
                :value="dev.name"
            >
            </el-option>
      </el-select>
      <el-button @click="addNewDev">添加</el-button>
      
      </el-row>
  </div>
</template>

<script>
import { getAllEquip } from "api/admin/equipInfo";

export default {
    name:"devSelect",
    props:{
        devlist:{
            type:Array,
            required:true,
        }
    },
    data(){
      return{
          newDev:"",
          DevList:[],
          allDevList:[]
      }  
    },
    computed:{
        restList(){
            let list = this.allDevList.filter(item=>{
                return this.DevList.indexOf(item.name)==-1
            })
            console.log("restlist");
            console.log(list);
            return list
        }
    },
    methods:{
        deleteDevTag(tag){
            this.devlist.splice(this.devlist.indexOf(tag),1)
            this.$emit("deleteDev",this.devlist)
        },
        addNewDev(){
            this.devlist.push(this.newDev)
            this.$emit("deleteDev",this.devlist)
            this.newDev = ""
        }
    },
    watch:{
        devlist(){
            this.DevList = this.devlist
        }
    },
    mounted(){
        this.DevList = this.devlist

        getAllEquip({index:0,PageSize:0}).then((res) => {
        const list = res.devicename;
        let devList = [];

        list.forEach((item) => {
            devList.push({ id: item.id, name: item.name });
        });

        this.allDevList = devList;
        });
    },
}
</script>

<style>

</style>